<template>
    <div style="height:100%;">
        <navbar :title="$t('exam_manage')" :showBackButton=false :showLeftArrow=false>
            <template #left>
                <i @click="openTrainCenterTree" class="head-icon iconfont icon-peixunzhongxin"></i>
            </template>
        </navbar>
        <div class="content" style="padding-bottom: 56px;">
            <div class="header-select">
                <span class="icon">
                    <i class="iconfont icon-liebiao" @click="openCatalogTree"></i>
                </span>
                <div slot="overwrite-title" class="search-input">
                    <form action="/">
                        <van-search
                            v-model="pageData.searchText"
                            :placeholder="$t('circle257')"
                            input-align="left" @clear="deleteSearch"
                            @search="onSearch"
                            @blur="onSearch"/>
                    </form>
                </div>
            </div>
            <!-- 列表数据 -->
            <div style="height: calc(100% - 47px);" class="body-content" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getList"
                    style="padding-bottom: 56px;"
                    >
                        <div class="box2" v-bind:class="{'height100' : total === 0}">
                            <div v-for="(item, index) in dataList" :key="index" class="list-item">
                                <div class="item-text">
                                    <div class="base-info" @click="toDetail(item)">
                                        <div class="name">{{item.itmTitle || '--'}}</div>
                                        <div class="user-group">
                                            <i class="iconfont icon-xiangyou"></i>
                                        </div>
                                    </div>
                                    <div class="appovel-title">
                                        <i class="iconfont icon-w_book"></i>
                                        <span v-if="item.itmType==='SELFSTUDY'">{{$t('exam_type_selfstudy')}}</span>
                                        <span v-else>{{$t('exam_type_classroom')}}</span>
                                    </div>
                                    <div class="appovel-title">
                                        <i class="iconfont icon-w_time"></i>
                                        <span>
                                            <!-- 开始时间为空或者课程类型为游戏化课程时，由：报名成功当日 至 结束时间，否则计算开始时间 -->
                                            <template v-if="(item.itmContentEffStartDatetime && item.itmType !== 'MAP')">{{item.itmContentEffStartDatetime.split(' ')[0] }} </template>
                                            <template v-else>{{$t('cos_detail_eff_start_time')}} </template>
                                            <!-- // 结束时间为空或者结束时间为9999-12-31 不限制 否则计算结束时间 -->
                                            {{ $t('time_to') + ' ' + (item.itmContentEffEndDatetime && item.itmContentEffEndDatetime.indexOf('9999-12-31') === -1 ? item.itmContentEffEndDatetime.split(' ')[0] : $t('cos_unlimited')) }}
                                        </span>
                                    </div>
                                    <div class="appovel-title">
                                        <i class="iconfont icon-quanxiaozongrenshu"></i>
                                        <span>{{item.itmAppTotalCount || 0}}{{$t('person')}}</span>
                                    </div>
                                    <div v-if="item.itmStatus==='OFF'" class="appovel-title">
                                        <i class="iconfont icon-weifabu" style="color: #FFAE52;"></i>
                                        <span>{{$t('lab_unpublished')}}</span>
                                    </div>
                                    <div v-else class="appovel-title">
                                        <i class="iconfont icon-yifabu" style="color: #32B16C;"></i>
                                        <span>{{$t('lab_published')}}</span>
                                    </div>
                                </div>
                                <div class="button-box">
                                    <div v-if="item.itmStatus==='OFF'" class="pass-btn" @click="handleAllow(item.itmId)">{{ $t('btn_publish') }}</div>
                                    <div v-else class="refuse-btn" @click="handleRefuse(item.itmId)">{{ $t('cancel_publish') }}</div>
                                </div>
                            </div>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <common-loading :isLoading="isLoading"></common-loading>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <!-- 培训中心 弹框 -->
        <van-popup v-model="showTrainCenter" round position="bottom">
                <van-cascader
                    v-model="centerValue"
                    :title="$t('select_train_center_tree')"
                    active-color=" #075ebb"
                    :options="trainCenterList"
                    @close="showTrainCenter = false"
                    @change="trainCenterChange"
                    :field-names="{text: 'name', value: 'id', children: 'children'}"/>
            </van-popup>
        <!-- 目录树 popup -->
        <div>
            <van-popup v-model="showCatalogTree" round position="bottom">
                <van-cascader
                    v-model="cascaderValue"
                    :title="$t('select_catalog_tree')"
                    active-color=" #075ebb"
                    :options="catalogList"
                    @close="showCatalogTree = false"
                    @change="mlChange"
                    :field-names="{text: 'name', value: 'id', children: 'children'}"/>
            </van-popup>
        </div>
        <!-- 底部导航 -->
        <admin-bottom-navigation :active=2></admin-bottom-navigation>
        <!-- 确定发布吗？ -->
        <van-dialog
        v-model="comfirmModal"
        show-cancel-button
        :title="$t('sure_pass_publish')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="handleAllowComfirm"
        >
        </van-dialog>
        <!-- 确定取消发布吗？ -->
        <van-dialog
        v-model="refuseComfirmModal"
        show-cancel-button
        :title="$t('sure_refuse_publish')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="handleRefuseComfirm"
        >
        </van-dialog>
    </div>
  </template>

<script>
import { Tab, Tabs, Icon, Cascader, Popup } from 'vant';
import CommonLoading from '@/components/common/loading';
import AdminBottomNavigation from '@/components/adminComponent/adminBottomNavigation/AdminBottomNavigation';
export default {
    name: 'examManage',
    components: {
        AdminBottomNavigation,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Icon.name]: Icon,
        vanCascader: Cascader,
        vanPopup: Popup,
        CommonLoading
    },
    data() {
        return {
            showTrainCenter: false,
            showCatalogTree: false,
            centerValue: 0,
            cascaderValue: 0,
            catalogList: [],
            dataList: [],
            pageData: {
                pageNo: 1,
                pageSize: 5,
                searchText: ''
            },
            total: 0,
            isLoading: true,
            isTop: false,
            numObj: {
                pend: 0,
                approved: 0
            },
            comfirmModal: false,
            refuseComfirmModal: false,
            curItemId: null,
            tcrId: 0,
            trainCenterList: [],
            onFetching: false,
            catId: 0,
            finished: true,
            isRefresh: false,
            isHasCenter: true
        };
    },
    mounted() {
        this.checkHasTrainCenter();
    },
    methods: {
        checkHasTrainCenter() {
            this.$axios({
                method: 'GET',
                url: `/app/api/training-center/list`
            }).then((res) => {
                this.getList('refresh');
            }).catch(() => {
                this.isHasCenter = false;
                this.isLoading = false;
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            if (!this.isHasCenter) {
                this.isRefresh = false;
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
                return false;
            }
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageData.pageNo = 1;
                this.getList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getList(option) {
            if (!this.isHasCenter) {
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
                return false;
            }
            this.isLoading = true;
            let data = {
                isExam: true,
                tcrId: this.tcrId,
                itmCosType: 'ALL',
                itmStatus: 'ALL',
                itmTndId: this.catId, // 目录id
                searchText: this.pageData.searchText,
                sortEnum: 'DROP', // 升降序 DROP-降序(默认值) RISE-升序
                fieldEnum: 'PUBLISH_TIME' // 排序字段 PUBLISH_TIME-发布时间(默认值) UPDATE_TIME-修改时间 TITLE-标题
            };
            this.$axios.post(`/app/api/course/list`, data, { params: this.pageData }).then((res) => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.dataList = res.data.results;
                    } else {
                        this.dataList = this.dataList.concat(res.data.results);
                    }
                } else {
                    if (option && option === 'refresh') {
                        this.dataList = res.data.results;
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageData.pageNo++;
                if (this.dataList.length >= this.total) {
                    this.finished = true;
                } else {
                    this.finished = false;
                }
            }).catch(() => {
                this.isLoading = false;
                this.finished = true;
            });
        },
        onSearch() {
            this.pageData.pageNo = 1;
            this.getList('refresh');
        },
        deleteSearch() {
            this.pageData.pageNo = 1;
            this.pageData.searchText = '';
            this.getList('refresh');
        },
        // 获取培训中心树
        openTrainCenterTree() {
            if (!this.isHasCenter) {
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
                return false;
            }
            this.showTrainCenter = true;
            // this.centerValue = '';
            this.$axios({
                method: 'GET',
                url: `/app/api/training-center/getTreeList`,
                params: {
                    id: 0
                }
            }).then((res) => {
                // 培训中心
                this.trainCenterList = res.data;
                let obj = {
                    name: this.$t('circle258'),
                    id: 0
                };
                this.trainCenterList.unshift(obj);
            });
        },
        trainCenterChange(val) {
            // console.log('选择了培训中心', val);
            this.tcrId = val.value;
            // 培训中心改变了，目录也得跟着变
            this.catId = 0;
            this.pageData.pageNo = 1;
            this.getList('refresh');
            let obj = {
                name: this.$t('circle258'),
                id: val.value
            };
            let lastI = val.selectedOptions.length - 1;
            let lastChild = val.selectedOptions[lastI];
            //
            let juDge = lastChild.children && lastChild.children.length > 0;
            let juDge1 = lastChild.id && lastChild.children && lastChild.children.length === 0;
            if (juDge && lastChild.children[0].name === this.$t('circle258')) {
                return;
            }
            if (juDge) {
                lastChild.children.unshift(obj);
            }
            if (juDge1) {
                lastChild.children = null;
            }
        },
        openCatalogTree() {
            if (!this.isHasCenter) {
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
                return false;
            }
            this.showCatalogTree = true;
            // this.cascaderValue = '';
            this.$axios({
                method: 'GET',
                url: `/app/api/catalog/list/tree`,
                params: {
                    trainId: this.tcrId,
                    catTypeInd: 1
                }
            }).then((res) => {
                // 目录
                this.catalogList = res.data;
                let obj = {
                    name: this.$t('circle258'),
                    id: 0
                };
                this.catalogList.unshift(obj);
            });
        },
        mlChange(val) {
            // console.log('选择了目录', val);
            this.catId = val.value;
            this.pageData.pageNo = 1;
            this.getList('refresh');
            let obj = {
                name: this.$t('circle258'),
                id: val.value
            };
            let lastI = val.selectedOptions.length - 1;
            let lastChild = val.selectedOptions[lastI];
            //
            let juDge = lastChild.children && lastChild.children.length > 0;
            let juDge1 = lastChild.id && lastChild.children && lastChild.children.length === 0;
            if (juDge && lastChild.children[0].name === this.$t('circle258')) {
                return;
            }
            if (juDge) {
                lastChild.children.unshift(obj);
            }
            if (juDge1) {
                lastChild.children = null;
            }
        },
        toDetail(item) {
            this.$router.push('/examManage/detail?title=' + item.itmTitle + '&itmId=' + item.itmId + '&itmType=' + item.itmType);
        },
        // 发布单行
        handleAllow(itmId) {
            this.comfirmModal = true;
            this.curItemId = itmId;
        },
        // 发布单行再次确认
        handleAllowComfirm() {
            const data = {
                itmAccessType: 'ALL',
                itmMobileInd: 'yes',
                itmId: this.curItemId,
                itmIsOaNotify: false,
                itmStatus: 'ON'
            };
            this.approvalApp(data);
        },
        // 取消发布单行
        handleRefuse(itmId) {
            this.refuseComfirmModal = true;
            this.curItemId = itmId;
        },
        // 取消发布单行再次确认
        handleRefuseComfirm() {
            const data = {
                itmAccessType: 'ALL',
                itmMobileInd: 'yes',
                itmId: this.curItemId,
                itmStatus: 'OFF'
            };
            this.approvalApp(data);
        },
        approvalApp(data) {
            this.$axios.put(`/app/api/course/publish`, data).then((res) => {
                this.pageData.pageNo = 1;
                this.getList('refresh');
                this.comfirmModal = false;
                this.refuseComfirmModal = false;
            });
        }
    },
    computed: {
    }
};
</script>

  <style scoped lang='less'>
  .head-icon {
      font-size: 25px;
      display: inline-block;
      margin: 0px 0 0 15px;
      color: #999;
  }
  .header-select{
      display: flex;
      align-items: center;
      .icon{
          display: inline-block;
          width: 56px;
          height: 56px;
          text-align: center;
          color: #999;
          line-height: 56px;
      }
      .search-input{
          flex: 1;
          margin-left: 20px;
      }
      /deep/.van-search{
          background: #fff;
          .van-search__content{
          border-radius: 10px;
          width: 100%;
          height: 30px;
          background: #f5f5f5;
          color: #333;
          margin: 0 auto;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          .van-field__control{
              color: #333;
          }
          input::-webkit-input-placeholder {
              color: #999;
          }
          .van-icon-clear{
              color: #333;
          }
          .van-cell{
              color: #333;
          }
          }
      }
  }
  .list-item{
      background: white;
      border-radius: 3px;
      margin: 15px;
      padding: 15px 20px;
      position: relative;
      .item-text{
          .base-info{
              display: flex;
              justify-content: space-between;
            //   align-items: center;
              margin-bottom: 20px;
              .name{
                    font-size: 15px;
                    color: #333333;
                    width: 80%;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    height: 40px;
              }
              .user-group{
                  font-size: 12px;
                  margin-top: 4px;
                  i{
                    color: #999999;
                  }
              }
          }
          .appovel-title{
              display: flex;
              margin-bottom: 10px;
              align-items: center;
              i{
                  color: #C9C9C9;
                  font-size: 18px;
              }
              span{
                  margin-left: 8px;
                  font-size: 12px;
                  color: #666666;
              }
          }
      }
      .button-box{
            padding-top: 10px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            position: absolute;
            bottom: 15px;
            right: 20px;
            div{
                    font-size: 14px;
                    border-radius: 3px;
                    display: inline-block;
                    width: 94px;
                    height: 31px;
                    text-align: center;
                    line-height: 31px;
            }
            .pass-btn{
                border: 1px solid #075EBB;
                color: #075EBB;
            }
            .refuse-btn{
                margin-left: 15px;
                border: 1px solid #E63442;
                color: #E63442;
            }
      }
  }
  </style>
